<template>
  <div class="cer-root">

    <el-row :gutter="10" class="mb8 s-header">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="back">
          返回
        </el-button>
      </el-col>
    </el-row>

    <div class="cer-list" v-loading="loading">
      <div v-for="item in dataList" class="img-div">
        <img :src="item.src"/>
        <div class="image-mask">
          <div>
            <i class="el-icon-search" @click="bigPic(item.src)"/>
            <i class="el-icon-circle-close" @click="handleDelete(item.id)"/>
          </div>
        </div>
      </div>
    </div>


    <pagination
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"/>


    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>

      <div class="zz-sto-f-container">
        <el-scrollbar>
          <upload-image v-if="open" v-model="photoPath" :limit="1"></upload-image>
        </el-scrollbar>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, computed, watch } from '@vue/composition-api'
  import { Message, MessageBox } from 'element-ui'
  import store from '@/store'
  import router from '@/router'
  import { addQua, deleteQua, getQuaList } from '@/api/industry/lab'
  import { getPicUrl } from '@/api/industry/file'
  import UploadImage from '@/components/UploadImage/index'
  import { larkViewer } from 'lark-common'

  export default {
    props: {},
    components: {
      UploadImage
    },
    setup(props, content) {

      let {} = props

      let { history: { current: { query: { id, labId, pageNum, pageSize, queryType, showType, proId } } } } = router

      const data = reactive({
        open: false,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          labId: id,
          state: '0'
        },
        dataList: [],
        total: 0,
        loading: false,
        title: '',
        photoPath: []
      })

      const back = () => {
        router.push({ path: '/lab', query: { labId, pageNum, pageSize, queryType, showType, proId } })
      }

      // 表单重置
      const reset = () => {
        data.photoPath = []
      }

      /** 新增按钮操作 */
      const handleAdd = () => {
        reset()
        data.open = true
        data.title = '新增资质'
      }

      //  删除
      const handleDelete = id => {
        if (!id) return
        MessageBox.confirm('此操作将删除该资质, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          deleteQua(id).then(res => {
            Message.success('删除成功')
            getList()
          })
        })
      }

      const getList = () => {
        data.loading = true
        getQuaList(data.queryParams).then(response => {
          data.dataList = response.rows.map(item => {
            let { photoPath, id } = item
            return { src: `${getPicUrl}/${photoPath}`, id }
          })
          data.total = response.total
          data.loading = false
        })
      }

      const submitForm = async() => {
        let { photoPath: [{ fileName: photoPath }] } = data
        await addQua({ photoPath, labId: id })
        Message.success('添加成功')
        data.open = false
        getList()
        reset()
      }

      // 取消按钮
      const cancel = () => {
        data.open = false
        reset()
      }

      const bigPic = path => {
        larkViewer([{ src: path }])
      }

      watch(() => data.open, val => {
        reset()
      })

      getList()

      return { ...toRefs(data), back, handleAdd, getList, cancel, submitForm, handleDelete, bigPic }
    }
  }
</script>

<style scoped lang="scss">
  $full: 100%;
  .cer-root {
    width: 100%;
    height: 100%;
    padding: 10px;

    .s-header {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }

    .cer-list {
      height: calc(100% - 120px);
      width: 100%;
      padding: 20px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      overflow: auto;

      .img-div {
        margin-left: 2%;
        flex-basis: 18%;
        height: 48%;
        position: relative;

        img {
          width: 100%;
          height: 100%;
        }

        .image-mask {
          position: absolute;
          width: 100%;
          height: 100%;
          bottom: 0;
          color: #ffffff;
          opacity: 0;
          line-height: 300px;
          display: none;
          background: rgba(101, 101, 101, 0.6);
        }

        &:hover .image-mask {
          opacity: 1;
          cursor: default;
          display: flex;
          flex-direction: column;
          align-content: center;
          justify-content: center;
          text-align: center;
          font-size: 50px;
        }
      }
    }


    .pagination-container {
      height: 53px;
    }
  }
</style>
<style lang="scss">
  .zz-sto-f-container {
    height: 200px;
  }

  .zz-s-i-container {
    height: 100px;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-content: center;
  }
</style>
